<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("#user").blur(checkname);
				$("#pwd").blur(checkpass);
				$("#repwd").blur(checkrpass);
				$("#email").blur(checkemail);
				$("form").submit(function() {
             return (checkname()&checkpass()&checkrpass()&checkemail())>0;
				});
			});

			function checkname() {
			var b = $("#user").val();
					var bs = /^\w{4,12}$/;
					if(bs.test(b) == false) {
						$("#user_prompt").html("昵称格式不正确").css("color", "red");
						return false;
					}
					$("#user_prompt").html("√").css("color", "green");
			}
		
			function checkpass() {
				var c = $("#pwd").val();
					var cs = /^[A-Za-z0-9]{4,10}$/;
					if(cs.test(c) == false) {
						$("#pwd_prompt").html("密码格式不正确").css("color", "red");
						return false;
					}
					$("#pwd_prompt").html("√").css("color", "green");
			}
			function checkrpass() {
				var c = $("#pass").val();
				var d = $("#repwd").val();
					if(d != c) {
						$("#repwd_prompt").html("两次密码必须一致").css("color", "red");
						return false;
					}
					$("#repwd_prompt").html("√").css("color", "green");
					
			}
			
			function checkemail() {
				var a = $("#email").val();
					var as = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
					if(as.test(a) == false) {
						$("#email_prompt").html("邮箱格式不正确").css("color", "red");
						return false;
					} else {
						$("#email_prompt").html("√").css("color", "green");
					}
			}
		</script>
	
	</head>

	<body>
		<form action="" method="post" name="myform">
			<dl>
				<dd>电子邮箱：<input id="email" type="text" placeholder="请输入你的常用邮箱" /><span id="email_prompt">请输入你的常用邮箱</span></dd>

			</dl>
			<dl>
				<dd>用户名：<input id="user" type="text" placeholder="请输入昵称" /><span id="user_prompt">4-12位字符英文字母数字或者中文均可</span></dd>

			</dl>
			<dl>
				<dd>密码：<input id="pwd" type="password" /><span id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</span></dd>

			</dl>
			<dl>
				<dd>确认密码：<input id="repwd" type="password" /><span id="repwd_prompt"></span></dd>
			</dl>
			<dl>
				<dd><input type="checkbox" id="tongyi" required="required"/>
					<a>同意用户服务条款</a><span id="tongyi_prompt"></span></dd>

			</dl>
			<dl>
				<dt>&nbsp;</dt>
				<dd><input name="" type="image" src="re/images/register.jpg" class="btn" /></dd>
			</dl>
		</form>
	</body>

</html>